<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('人员异动分析')"/>
    <th:block th:include="include :: layout-latest-css"/>
    <th:block th:include="include :: ztree-css"/>
</head>
<style>
    select {
        padding-top: 3px !important;
    }

    .select-list {
        margin-top: 5px !important;
    }

    .select-list li p {
        width: auto !important;
        margin-top: 7px !important;
    }

    .form-header {
        margin: 10px auto !important;

    }

    .table-striped .table > thead:first-child > tr:first-child > th {
        font-weight: normal;
        font-size: 13px;
        border: 1px solid #cccccc;
        border-right: none;
        border-top: 1px solid #cccccc !important;
    }

    .text {
        line-height: 34px;
        margin-bottom: 20px;
    }

    .modal-body {
        padding: 15px !important;
    }
</style>
<body class="gray-bg">
<div class="ui-layout-center">
    <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="project-form">
                    <div class="col-sm-12">
                        <div class="select-list">
                            <ul>
                                <li>
                                    <p>单位：</p>
                                    <select name="compId" id="compId" class="form-control">
                                        <option value="">请选择</option>
                                        <option th:each="pro:${userComp}" th:value="${pro.compId}"
                                                th:text="${pro.compName}"></option>
                                    </select>

                                </li>
                                <li>
                                    <p>年份：</p>
                                    <select name="years" class="form-control">
                                        <option value="">请选择</option>
                                        <option value="2020">2020</option>
                                        <option value="2021">2021</option>
                                        <option value="2022">2022</option>
                                        <option value="2023">2023</option>
                                        <option value="2024">2024</option>
                                        <option value="2025">2025</option>
                                    </select>
                                </li>
                                <li>
                                    <p>月份：</p>
                                    <select name="months" class="form-control">
                                        <option value="">请选择</option>
                                        <option value="1">一月</option>
                                        <option value="2">二月</option>
                                        <option value="3">三月</option>
                                        <option value="4">四月</option>
                                        <option value="5">五月</option>
                                        <option value="6">六月</option>
                                        <option value="7">七月</option>
                                        <option value="8">八月</option>
                                        <option value="9">九月</option>
                                        <option value="10">十月</option>
                                        <option value="11">十一月</option>
                                        <option value="12">十二月</option>
                                    </select>
                                </li>
                                <li>
                                    <a class="btn btn-primary btn-rounded btn-sm" onclick="operation('search')"><i
                                            class="fa fa-search"></i>&nbsp;搜索</a>
                                    <a class="btn btn-warning btn-rounded btn-sm" onclick="operation('reset')"><i
                                            class="fa fa-refresh"></i>&nbsp;重置</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-sm-12 select-table table-striped">

                <div class="btn-group-sm" id="toolbar" role="group">
                    <a class="btn btn-success" onclick="$.operate.add()">
                        <i class="fa fa-plus"></i> 新增
                    </a>
                    <a class="btn btn-primary single disabled" onclick="$.operate.edit()">
                        <i class="fa fa-edit"></i> 修改
                    </a>
                    <!--<a class="btn btn-danger" onclick="operation('remove')">-->
                    <!--<i class="fa fa-remove"></i> 删除-->
                    <!--</a>-->
                    <a class="btn btn-warning" onclick="exportEmpChange()">
                    <i class="fa fa-download"></i> 导出
                    </a>
                </div>
                <table id="empChange-table"></table>
                <div class="col-sm-12 sum"></div>
            </div>
        </div>
    </div>
</div>





<th:block th:include="include :: footer"/>
<th:block th:include="include :: layout-latest-js"/>
<th:block th:include="include :: ztree-js"/>
<script th:inline="javascript">
    var prefix = ctx + 'empChange';
    var value;
    $(function () {

        var empChange_options = {
            url: prefix + '/list',
            uniqueId: "id",
            id: 'empChange-table',
            createUrl: prefix + "/add",
            removeUrl: prefix + "/remove",
            updateUrl: prefix + "/edit/{id}",
            modalName: "人员异动",
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            pagination:false,
            rowStyle: function (row, index) {
                var style = {};
                style={css:{'color':'#ed5565','font-weight':'700'}};

                if(row.compName=='合计'){
                    return style;
                }else {
                    return '';
                }

            },
            columns: [
                [
                    {
                        checkbox: true,
                        rowspan: 2,
                        valign: "middle",
                        align: "center",
                    },
                    {
                        field: 'compName',
                        title: '工程公司名称',
                        rowspan: 2,
                        valign: "middle",
                        align: "center"
                    },
                    {
                        field: 'months',
                        title: '月份',
                        rowspan: 2,
                        valign: "middle",
                        align: "center"
                    },
                    {
                        field: 'years',
                        title: '年份',
                        rowspan: 2,
                        valign: "middle",
                        align: "center"
                    },

                    {
                        field: 'monthFirstNum',
                        title: '月初人数',
                        rowspan: 2,
                        valign: "middle",
                        align: "center",
                        sortable: true


                    },
                    {
                        field: 'monthEndNum',
                        title: '月末人数',
                        rowspan: 2,
                        valign: "middle",
                        align: "center"
                    },

                    {
                        field: 'entryNum',
                        title: '入职人数',
                        rowspan: 2,
                        valign: "middle",
                        align: "center"
                    },
                    {
                        title: '本月离职',
                        rowspan: 1,
                        colspan: 5,
                        align: "center"
                    },
                    {
                        title: '本月异动',
                        rowspan: 1,
                        colspan: 8,
                        align: "center"
                    },
                ],
                [
                    {
                        field: 'activeQuitNum',
                        title: '主动离职',
                        align: "center"
                    },
                    {
                        field: 'passiveQuitNum',
                        title: '被动离职',
                        align: "center"
                    },
                    {
                        field: 'monthTotalQuitNum',
                        title: '月总离职人数',
                        align: "center"
                    },
                    {
                        field: 'activeQuitRate',
                        title: '主动离职率',
                        align: "center"
                    },

                    {
                        field: 'totalQuitRate',
                        title: '总离职率',
                        align: "center"
                    },
                    {
                        field: 'transferInNum',
                        title: '调入',
                        align: "center"
                    },
                    {
                        field: 'callOutNum',
                        title: '调出',
                        align: "center"
                    },
                    {
                        field: 'promotionNum',
                        title: '晋升',
                        align: "center"
                    },
                    {
                        field: 'demotionNum',
                        title: '降职',
                        align: "center"
                    },
                    {
                        field: 'postTransferNum',
                        title: '调岗',
                        align: "center"
                    },
                    {
                        field: 'justNum',
                        title: '转正',
                        align: "center"
                    },
                    {
                        field: 'changeSalary',
                        title: '调薪',
                        align: "center"
                    },
                    {
                        field: 'monthTotalChangeNum',
                        title: '本月异动',
                        align: "center"
                    },
                ],
            ]
        }
        $.table.init(empChange_options);
        // sum();
        console.log(empChange_options.columns);

    })

    // function sum() {
    //     setTimeout(function () {
    //         value = $("#empChange-table").bootstrapTable('getData');
    //         var monthFirstNum = 0;//月初人数
    //         var entryNum = 0;//入职人数
    //         var activeQuitNum = 0;//主动离职
    //         var passiveQuitNum = 0;//被动离职
    //         var monthTotalQuitNum = 0;//月总离职人数
    //         var activeQuitRate = 0;//主动离职率
    //         var totalQuitRate = 0;//总离职率
    //         var transferInNum = 0;//调入
    //         var callOutNum = 0;//调出
    //         var promotionNum = 0;//晋升
    //         var demotionNum = 0;//降职
    //         var postTransferNum = 0;//调岗
    //         var justNum = 0;//转正
    //         var changeSalary = 0;//调薪
    //         var monthTotalChangeNum = 0;//本月异动
    //         var monthEndNum = 0;//月末人数
    //
    //         for (var i in value) {
    //
    //             monthFirstNum += value[i].monthFirstNum;
    //             entryNum += value[i].entryNum;
    //             activeQuitNum += value[i].activeQuitNum;
    //             passiveQuitNum += value[i].passiveQuitNum;
    //             monthTotalQuitNum += value[i].monthTotalQuitNum;
    //             transferInNum += value[i].transferInNum;
    //             callOutNum += value[i].callOutNum;
    //             promotionNum += value[i].promotionNum;
    //             demotionNum += value[i].demotionNum;
    //             postTransferNum += value[i].postTransferNum;
    //             justNum += value[i].justNum;
    //             changeSalary += value[i].changeSalary;
    //             monthTotalChangeNum += value[i].monthTotalChangeNum;
    //             monthEndNum += value[i].monthEndNum;
    //
    //         }
    //         if (value.length == 0) {
    //             activeQuitRate = 0;
    //             totalQuitRate = 0;
    //         } else {
    //             activeQuitRate = (activeQuitNum / monthFirstNum * 100).toFixed(2) + "%";
    //             totalQuitRate = ((activeQuitNum + passiveQuitNum) / monthFirstNum * 100).toFixed(2) + "%";
    //         }
    //         var html;
    //         html = '<div class="col-sm-12" style="text-align: center;margin-top: 10px;">' + '<h3 style="display: inline;">合计：</h3>' +
    //             '<div style="display: inline">' +
    //             "月初人数：" + '<sapan style="color: red;">' + monthFirstNum + '</sapan>' + "；" +
    //             "月末人数：" + '<sapan style="color: red;">' + monthEndNum + '</sapan>' + "；" +
    //             "入职人数：" + '<sapan style="color: red;">' + entryNum + '</sapan>' + "；" +
    //             "主动离职：" + '<sapan style="color: red;">' + activeQuitNum + '</sapan>' + "；" +
    //             "被动离职：" + '<sapan style="color: red;">' + passiveQuitNum + '</sapan>' + "；" +
    //             "月总离职人数：" + '<sapan style="color: red;">' + monthTotalQuitNum + '</sapan>' + "；" +
    //             "主动离职率：" + '<sapan style="color: red;">' + activeQuitRate + '</sapan>' + "；" +
    //             "总离职率：" + '<sapan style="color: red;">' + totalQuitRate + '</sapan>' + "；" +
    //             "调入：" + '<sapan style="color: red;">' + transferInNum + '</sapan>' + "；" +
    //             "调出：" + '<sapan style="color: red;">' + callOutNum + '</sapan>' + "；" +
    //             "晋升：" + '<sapan style="color: red;">' + promotionNum + '</sapan>' + "；" +
    //             "降职：" + '<sapan style="color: red;">' + demotionNum + '</sapan>' + "；" +
    //             "调岗：" + '<sapan style="color: red;">' + postTransferNum + '</sapan>' + "；" +
    //             "转正：" + '<sapan style="color: red;">' + justNum + '</sapan>' + "；" +
    //             "调薪：" + '<sapan style="color: red;">' + changeSalary + '</sapan>' + "；" +
    //             "本月异动：" + '<sapan style="color: red;">' + monthTotalChangeNum + '</sapan>' + "；" +
    //             '</div>' + '</div>';
    //         $(".sum").empty();
    //         $(".sum").append(html);
    //     }, 500);
    // }

    function operation(data) {
        if (data == 'remove') {
            $.operate.removeAll();
            $(".layui-layer-btn0").click(function () {
                //sum();
            })
        }
        if (data == 'search') {
            $.table.search();
            //sum();
        }
        if (data == 'reset') {
            $.form.reset();
            //sum();
        }
    }

    function exportEmpChange() {
        $('#empChange-table').bootstrapTable('hideColumn', 0);
        $("#empChange-table").tableExport({type: 'excel',
            fileName: '人员异动表',
            exportDataType: "all",
        });
        $('#empChange-table').bootstrapTable('showColumn', 0);
    }


</script>
</body>
</html>